<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改</title>
    <script src="./js/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            text-decoration: none;
        }
        
        .wrap {
            width: 900px;
            min-height: 90px;
            border: 1px solid skyblue;
            border-radius: 4px;
            margin: 6px;
        }
        
        .wrap h3 {
            width: 900px;
            height: 50px;
            background-color: rgb(179, 228, 247);
            margin-top: 0;
            line-height: 50px;
            color: rgb(10, 76, 104);
        }
        
        .wrap h2 {
            width: 900px;
            height: 60px;
            margin-top: 0;
            line-height: 60px;
            border-bottom: 2px solid #999;
        }
        
        .con {
            width: 880px;
            height: 100%;
            margin: 6px auto;
        }
        
        .con input {
            width: 876px;
            height: 40px;
            margin-top: 10px;
        }
        
        button {
            width: 876px;
            height: 40px;
            margin-top: 10px;
            background-color: rgb(10, 76, 104);
            color: #fff;
            border: 0;
            border-radius: 3px;
        }
    </style>
</head>

<body>
    修改页面
    <div class="wrap">
        <h3>学生信息修改页</h3>
        <h2>信息录入</h2>
        <div class="con">
            姓名<br>
            <input type="text" placeholder="请输入姓名"><br> 手机号
            <input type="text" placeholder="请输入手机号"><br> QQ号
            <input type="text" placeholder="请输入QQ号"><br> 专业
            <input type="text" placeholder="请输入专业"><br> 毕业时间
            <input type="text" placeholder="请输入毕业时间">
            <button>提交</button>
        </div>
    </div>

    <script>
        let ipts = document.querySelectorAll('input');
        let btn = document.querySelector('button');
        let obj = new URLSearchParams(location.search);
        let pid = obj.get('pid');
        console.log(pid);
        console.log(obj);
        axios({
            method: "patch",
            url: `http://localhost:3000/data/${pid}`, //ID
        }).then((data) => {
            let v = data.data;
            console.log(v);
            ipts[0].value = v.name;
            ipts[1].value = v.phome;
            ipts[2].value = v.qq;
            ipts[3].value = v.major;
            ipts[4].value = v.time;
            btn.onclick = function() {
                var ipts = document.querySelectorAll('input');
                axios({
                    method: "patch",
                    url: `http://localhost:3000/data/${pid}`, //ID
                    data: {
                        name: ipts[0].value,
                        phome: ipts[1].value,
                        qq: ipts[2].value,
                        major: ipts[3].value,
                        time: ipts[4].value,
                    }
                    // 要修改成什么
                }).then((data) => {
                    console.log(data);
                    alert('修改成功');
                    location.href = 'index.html'
                })
            }
        })
    </script>
</body>

</html>